﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreateOrder.aspx.cs" Inherits="Tradier.CreateOrder" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/Contents/flat-ui/css/vendor/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/Contents/flat-ui/css/flat-ui.css" />
    <link rel="stylesheet" type="text/css" href="/Contents/css/style.css" />
    <script type="text/javascript" src="/Contents/js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="/Contents/js/app.js"></script>
</head>
<body>
    <form id="createOrderForm" runat="server" class="container">
    <h5>
        Create an Order
    </h5>
    <div>
        <div class="row">
            <div class="col-sm-12">
                <div>
                    <label for="class">
                        Accounts:
                    </label>
                    <select class="accounts form-control" name="account_id">
                        <%if (Accounts.Count != 0)
                          {
                              foreach (var account in Accounts)
                              {

                        %>
                        <option value="<%= account %>">
                            <%= account %>
                        </option>
                        <%
                            }
                          }%>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="row space">
                    <div class="col-sm-6">
                        <div>
                            <input type="text" placeholder="Symbol" class="symbol search-box form-control" name="symbol"
                                value="" />
                            <input type="button" class="search-button btn btn-primary" value="Search" />
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div>
                            <button class="btn-equity order-type btn btn-primary" data-value="equity">
                                Equity
                            </button>
                            <button class="btn-option order-type btn btn-primary" data-value="option">
                                Option
                            </button>
                            <button class="btn-multileg order-type btn btn-primary" data-value="multileg">
                                Multileg
                            </button>
                            <button class="btn-combo order-type btn btn-primary" data-value="combo">
                                Combo
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row space equity-leg-container" style="display: none;">
                    <h6 class="title">Equity Leg</h6>
                    <div class="equity-side-container col-sm-6">
                        <select class="equity-side form-control" name="comboequityside">
                            <option value="">Side</option>
                            <option value="buy">Buy</option>
                            <option value="buy_to_cover">Buy to Cover</option>
                            <option value="sell">Sell</option>
                            <option value="sell_short">Sell Short</option>
                        </select>
                    </div>
                    <div class="equity-quantity-container col-sm-6">
                        <input class="equity-quantity form-control" type="text" placeholder="Quantity" name="comboequityquantity"
                            value="" />
                    </div>
                </div>
                <div class="row space normal-order-container">
                    <h6 class="title" style="display: none;">
                        Option Leg</h6>
                    <div>
                        <input class="class-field" type="hidden" name="class" value="equity" />
                        <input class="option-field" type="hidden" name="option_symbol" value="" />
                    </div>
                    <div class="option-container">
                        <div class="col-sm-2">
                            <select class="expiration form-control" disabled="disabled">
                                <option>Expirations</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select class="strikes form-control" disabled="disabled">
                                <option>Strikes</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select class="cp-field form-control">
                                <option value="call">Call</option>
                                <option value="put">Put</option>
                            </select>
                        </div>
                    </div>
                    <div class="side-quatity-container">
                        <div class="side-container col-sm-6">
                            <select class="side form-control" name="side">
                                <option value="">Side</option>
                                <option value="buy">Buy</option>
                                <option value="buy_to_cover">Buy to Cover</option>
                                <option value="sell">Sell</option>
                                <option value="sell_short">Sell Short</option>
                            </select>
                        </div>
                        <div class="quantity-container col-sm-6">
                            <input class="quantity form-control" type="text" placeholder="Quantity" name="quantity"
                                value="" />
                        </div>
                    </div>
                </div>
                <div class="row space multileg-order-container">
                    <input type="hidden" class="multileg-params" name="multilegParams" />
                    <div class="col-sm-12">
                        <ul>
                            <li class="row item">
                                <div class="col-sm-2">
                                    <select class="multileg-expiration form-control" disabled="disabled">
                                        <option>Expirations</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="multileg-strikes form-control" disabled="disabled">
                                        <option>Strikes</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="multileg-cp-field form-control">
                                        <option value="call">Call</option>
                                        <option value="put">Put</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select class="multileg-side form-control">
                                        <option value="">Side</option>
                                        <option value="buy_to_open">Buy to Open</option>
                                        <option value="buy_to_close">Buy to Close</option>
                                        <option value="sell_to_open">Sell to Open</option>
                                        <option value="sell_to_close">Sell to Close</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <input class="multileg-quantity form-control" type="text" placeholder="Quantity"
                                        value="" />
                                    <input class="multileg-option-symbol form-control" type="hidden" />
                                </div>
                                <div class="col-sm-1">
                                    <span class="multileg-item-add">+</span> <span class="multileg-item-del">-</span>
                                </div>
                            </li>
                            <li class="row item">
                                <div class="col-sm-2">
                                    <select class="multileg-expiration form-control" disabled="disabled">
                                        <option>Expirations</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="multileg-strikes form-control" disabled="disabled">
                                        <option>Strikes</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="multileg-cp-field form-control">
                                        <option value="call">Call</option>
                                        <option value="put">Put</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select class="multileg-side form-control">
                                        <option value="">Side</option>
                                        <option value="buy_to_open">Buy to Open</option>
                                        <option value="buy_to_close">Buy to Close</option>
                                        <option value="sell_to_open">Sell to Open</option>
                                        <option value="sell_to_close">Sell to Close</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <input class="multileg-quantity form-control" type="text" placeholder="Quantity"
                                        value="" />
                                    <input class="multileg-option-symbol form-control" type="hidden" />
                                </div>
                                <div class="col-sm-1">
                                    <span class="multileg-item-add">+</span> <span class="multileg-item-del">-</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row space">
                    <div class="col-sm-6">
                        <div>
                            <select class="order-types form-control" name="type">
                                <option value="">Order Type</option>
                                <option value="market">Market</option>
                                <option value="limit">Limit</option>
                                <option value="stop">Stop</option>
                                <option value="stop_limit">Stop Limit</option>
                            </select>
                        </div>
                        <div class="limit-container space" style="display: none;">
                            <input class="price form-control" placeholder="Limit" type="text" name="price" value="" />
                        </div>
                        <div class="stop-container space" style="display: none;">
                            <input class="stop form-control" placeholder="Stop" type="text" name="stop" value="" />
                        </div>
                        <div class="amount-container space" style="display: none;">
                            <input class="amount form-control" placeholder="Amount" type="text" name="amount"
                                value="" />
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div>
                            <select class="duration form-control" name="duration">
                                <option value="">Duration</option>
                                <option value="day">Day</option>
                                <option value="gtc">GTC</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row space">
                    <div class="col-sm-12">
                        <input class="btn btn-info btn-preview" type="button" value="Preview" />
                        <input class="btn btn-danger btn-submit-order" type="submit" value="Submit" disabled />
                    </div>
                </div>
                <div class="row space messages">
                    <div class="col-sm-12">
                        <label>
                            ErrorMessage:
                        </label>
                        <span class="error">
                            <%= ErrorMessage %>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="symbol-result" style="display: none;">
                    <div class="share mrl">
                        <a href="#" class="btn btn-primary btn-block btn-large"><span class="name"></span>
                        </a>
                        <ul>
                            <li>
                                <label class="share-label">
                                    Last</label>
                                <span class="last"></span></li>
                            <li>
                                <label class="share-label">
                                    Change</label>
                                <span class="change"></span></li>
                            <li>
                                <label class="share-label">
                                    Bid</label>
                                <span class="bid"></span></li>
                            <li>
                                <label class="share-label">
                                    Ask</label>
                                <span class="ask"></span></li>
                        </ul>
                    </div>
                </div>
                <div class="option-result-container">
                    <div class="option-result" style="display: none">
                        <div class="share mrl">
                            <a href="#" class="btn btn-primary btn-block btn-large"><span class="description"></span>
                            </a>
                            <ul>
                                <li>
                                    <label class="share-label">
                                        Bid</label>
                                    <span class="bid"></span></li>
                                <li>
                                    <label class="share-label">
                                        Ask</label>
                                    <span class="ask"></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="preview-order-result" style="display: none">
                    <div class="share mrl">
                        <a href="#" class="btn btn-primary btn-block btn-large">Review Order</a>
                        <ul>
                            <li>
                                <label class="share-label">
                                    Commission: $</label>
                                <span class="commission"></span></li>
                            <li>
                                <label class="share-label">
                                    Est.Total Cost: $</label>
                                <span class="totalcost"></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>
